<template>
  <div id="addColumn">
    <div class="homeTitle">添加栏目操作角色</div>
    <div class="bottomTable">
      <div class="table">
        <table>
          <tr>
            <td>角色编号</td>
            <td>角色名称</td>
            <td>角色描述</td> 
            <td>操作</td>
          </tr>
          <tr v-for="(item, index) in tableBottom" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.illustrate}}</td>
            <td>
              <el-button type="primary" size="small" @click="del(item, index)">删除</el-button>
            </td>
          </tr>
          <tr>
            <td style="background: #EEEDE2; color: black;">添加新角色</td>
            <td style="background: #EEEDE2;"><el-input v-model="juese" placeholder="请输入角色名称"></el-input></td>
            <td style="background: #EEEDE2;"><el-input v-model="desc" placeholder="请输入角色描述"></el-input></td>
            <td style="background: #EEEDE2;"><el-button type="primary" size="small" @click="add">添加</el-button></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "addColumn",
  data() {
    return {
     tableBottom: [
        {
          ywlx: "xxxx",
          zhlx: "xxxxx",
          khyh: "xxxx",
        },
        {
          ywlx: "xxxx",
          zhlx: "xxxxx",
          khyh: "xxxx",
        },
        {
          ywlx: "xxxx",
          zhlx: "xxxxx",
          khyh: "xxxx",
        },
      ],
      juese: '',
      desc: '' 
    };
  },
  mounted () {
    this.getdata();
  },
  methods: {
    getdata () {
      this.axios.get('role/selectRole')
        .then(({data})=>{
          if (data.code== 200) {
            this.tableBottom = data.data;
          }
        })
    },
    del (item, index) {
      this.axios.post('role/deleteById', {id: item.id})
        .then(({data})=> {
          if(data.code == 200) {
            this.tableBottom.splice(index, 1);
            this.$message({message: '删除成功',type: 'success'});
          }
        })
    },
    close () {
      this.$router.go(-1);
    },
    add () {
      let obj= {
        name: this.juese,
        illustrate: this.desc
      }
      if (!obj.name) {
        this.$message({message: '角色名称不能为空',type: 'warning'});
      } else if (!obj.illustrate) {
        this.$message({message: '角色描述不能为空',type: 'warning'});
      } else {
        this.axios.post('role/add',obj)
          .then(({data})=> {
            if (data.code == 200) {
              this.getdata();
            }
          })
      }
    }
  }
};
</script>

<style lang="scss">
#addColumn {
  .bottomTable {
    margin-top: 30px;
    table {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
      tr {
        &:first-child {
          background-color: #181c1d !important;
          color: white;
          td {
            background-color: #181c1d !important;
          }
        }
        td {
          text-align: center;
          padding: 10px 10px;
          border-right: 1px solid white;
          border-bottom: 1px solid white;
          color: white;
          background: rgba(53, 58, 58, 0.55);
        }
      }
    }
    .addwhite {
      height: 46px;
      background-color: white;
      padding: 0 20px;
      span {
        color: #cccccc;
        line-height: 46px;
      }
    }
  }
  .btn {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    .el-button {
    }
  }
}
</style>
